<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #tips{
            height: 45px;
            line-height: 45px;
            border: 1px solid #333;
            font-size: 14px;
            text-indent: 10px;
        }
    </style>
</head>
<body>
    <div id="tips"></div>
    <button id="btn">stop</button>
</body>
<script>
    // 设置计时器
    // setInterval(callbackFn,interval);   每隔特定时间 指定 某个操作(函数)
    // callbackFn  传入一个函数用于指定每次间隔时间执行的内容  (提前指定了要执行的内容 => 函数(命名函数 匿名函数 => 把函数作为参数传入))
    // interval    间隔时间(单位是毫秒)

    // 返回值  数字 => 计时器的编号

    // 注意: 计时器从启动 到 开始执行 需要先等待对应的间隔时间

    // 清除计时器
    // clearInterval(计时器的编号)



   
    var btn = document.getElementById("btn");

   /*  // 页面加载时执行  => 先执行一次
    var date = new Date();
    tips.innerText = date;

    // 需求 每隔一秒再 执行一次 
    var timer1 = setInterval(function(){  //每隔1秒执行此函数
        var date = new Date();
        tips.innerText = date;
    },1000);
    console.log(timer1);
 */


    // 优化
    // 页面加载时执行  => 先执行一次
    showTips()

    // 需求 每隔一秒再 执行一次 
    var timer1 = setInterval( showTips,1000);  // 每隔1s执行 showTips
    console.log(timer1);

    function showTips(){
        var tips = document.getElementById("tips");
        var date = new Date();
        tips.innerText = date;
    }

    btn.onclick = function(){
        clearInterval(timer1);
    }

 



</script>
</html>